<template>
    <div class="container">
        <div class="head">
            解析到<text class="num">{{ phoneObj.totalNum || 0 }}</text>个号码，自动去重<text class="num-active">{{ phoneObj.autoRemoveNum || 0 }}</text>个
        </div>
        <div class="box">
            <div><text class="">*</text>任务名称：</div>
            <div class="row-b input-box">
                <div class="row-flex-one">
                  <!-- v-model="formName" -->
                  <!-- :value="formName" -->
                  <!-- @input="onInput" -->
                    <input class="uni-input" placeholder="请输入" v-model="formName" maxlength="14" @input="onInput"/>
                </div>
                <div class="num">{{ formName.length }}/14</div>
            </div>
        </div>
        <div class="foot-btn-box row-b">
            <button class="short-btn white" @click="onBack">取消</button>
            <button class="short-btn" @click="getQueryPhoneList">确定</button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onLoad, onShow } from "@dcloudio/uni-app"
import { queryPhoneList } from "@/api/phone"
import user from '@/utils/user'
import noData from '@/components/no-data/no-data.vue'
import {
    onMounted,
    ref,
    getCurrentInstance
} from 'vue'
import global from '@/utils/global'
import { dateFormat, toast, wait } from '@/utils/util'

interface File {
    autoRemoveNum: number
    importList: {isBlacklist:bigint, phone:string}[]
    importNum: number
    totalNum: number
}
const phoneObj = ref({} as File)
const formName = ref('')
const timeName = ref()
const file = ref()
const storageKeyList = ref([] as string[])

const getQueryPhoneList = async () => {
    if (!formName.value) {
        toast('请填写任务名称')
        return
    }
    timeName.value = new Date().getTime()
    uni.setStorageSync('phone' + timeName.value + '', { creationTime: timeName.value, fromList: phoneObj.value.importList || [], completeList: [], name: formName.value, date: dateFormat('YYYY-mm-dd', new Date()), key: 'phone' + timeName.value + '' })
    uni.redirectTo({
        url: '/pages/phoneCustomerList/index?key=' + 'phone' + timeName.value + ''
    })
}
const uploadFile = async () => {
    uni.uploadFile({
        url: global.baseUrl + '/api/v1/crm/telesalesBlacklist/readPhone',
        filePath: file.value.path,
        name: 'file',
        header: {
            'Content-Type': 'multipart/form-data'
        },
        success (res) {
            phoneObj.value = JSON.parse(res.data).data
        },
        fail () {
            toast('上传失败')
        }
    })
}
// 输入
const onInput = (event: any) => {
    console.log('调用了', event)
    const str = event.detail.value
    formName.value = str.slice(0, 14)
    console.log(formName.value, 'formName')
}
const onBack = () => {
    uni.navigateBack({
        delta: 1
    })
}

onLoad(async () => {
    // await user.waitLogin()
})
onShow(async () => {
    const storageInfo = uni.getStorageInfoSync()
    storageKeyList.value = storageInfo.keys.filter(item => {
        return item.includes('phone')
    })
    if (storageKeyList.value.length >= 20) {
        await user.waitLogin()
        await toast('最多只能保存20个号码，请先删除旧号码')
        return
    }

    formName.value = dateFormat('YYYY-mm-dd', new Date()) + '电话'
    const sync = uni.getEnterOptionsSync()
    console.log('调用了吗show方法', sync)
    if (sync.scene === 1173 && (sync?.forwardMaterials ?? false)) {
        file.value = sync.forwardMaterials[0]
        uploadFile()
        return
    }
    const instance = getCurrentInstance().proxy
    const eventChannel = instance.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', function (event: any) {
        file.value = event.tempFiles[0]
        console.log(file.value, 'filefile')
        // formList.value = data
        uploadFile()
    })
})
// onMounted(async () => {})

</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    background-color: #FAFAFC;
    @include padding(30rpx);
}

.head {
    color: #565868;
    font-size: 32rpx;
    @include padding(0 30rpx);

    .num {
        color: #3E5FF5;
        font-weight: 600;
    }
    .num-active{
        color: #FF7642;
        font-weight: 600;
    }
}

.box {
    @include padding(30rpx);
    background-color: #FFFFFF;
    border-radius: 16rpx;
    margin-top: 24rpx;

    .title {
        color: #202536;
        font-size: 28rpx;
    }

    text {
        color: #FF7642;
    }

    .row-flex-one {
        flex: 1;
    }

    .num {
        color: #9497B1;
        font-size: 32rpx;
    }

    .input-box {
        @include padding(23rpx 0 0 0);

        .uni-input {
            font-size: 32rpx;
        }
    }
}

.foot-btn-box {
    @include padding(60rpx 53rpx);

    .white {
        color: #999999;
    }
}

.row-b {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>
